<script setup>
import { computed, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { lunar } from '@/assets/lunar.js';
import PerWeek from '@/assets/img/perWeek.png'
import NextWeek from '@/assets/img/nextWeek.png'
import Clock from '@/assets/img/clock.png'
const weeks = ['日', '一', '二', '三', '四', '五', '六']
const calendar = ref(null);
const router = useRouter();
const route = useRoute();
const userId = route.query.userId;
const data = ref({})
const curData = ref([])
const currentDate = () => {
  let date = new Date()
  let curYear = date.getFullYear();
  let curMonth = ('0' + (date.getMonth() + 1)).slice(-2);
  let curDay = ('0' + (date.getDate())).slice(-2);
  return `${curYear}-${curMonth}-${curDay}`;
  // return `${curYear}年${curMonth}月${curDay}`;
}
const getData = async () => {
  let formData = new FormData();
  formData.append('userId', userId);
  formData.append('scheduleType', 0);
  formData.append('time', currentDate());
  let obj = {}
  if (typeof AOS == 'object') {
    let userInfo = JSON.parse(AOS.getUserInfo())
    obj = {
      headers: {
        'Authorization': 'Bearer' + ' ' + userInfo.token
      }
    }
  }
  const res = await axios.post('/TrueIDS/remind/getReMindForWeek', formData)
  if (res) {
    data.value = res.data.obj
    curData.value = data.value.thisWeeks
  }
}
getData()
const showLunar = (date) => {
  if (!date || !date.day) return;

  const lunarObj = lunar.solar2lunar(date.year, date.month + 1, date.day);

  return lunarObj.festival || lunarObj.lunarFestival || lunarObj.IDayCn;
};

const changeYearOrMonth = (isYear, type) => {
  console.log(isYear, type)
  if (!isYear) {
    if (type === 'up') {
      calendar.value.lastMonth();
    } else {
      calendar.value.nextMonth();
    }
  } else {
    if (type === 'up') {
      curYear.value = Number(curYear.value) - 1
    } else {
      curYear.value = Number(curYear.value) + 1
    }
    calendar.value.reset(new Date(curYear.value, curMonth.value - 1));
  }
}
const curYear = ref('')
const curMonth = ref('')
const formatYearMonth = () => {
  var date = new Date()
  curYear.value = date.getFullYear();
  curMonth.value = ('0' + (date.getMonth() + 1)).slice(-2);
  return `${curYear.value}年${curMonth.value}月`;
}
const curYearMonth = ref(formatYearMonth())
const dataList = ref([1, 2, 3, 4, 5, 6])

const dataChange = (data) => {
  console.log(data)
  curYear.value = data.substring(0, 4)
  curMonth.value = data.substring(5, 7)
  curYearMonth.value = curYear.value + '年' + curMonth.value + '月'
}
const gsh = (year, month, day) => {
  const date = new Date(year, month - 1, day);
  const weekDay = weeks[date.getDay()];
  return `${year}年${month}月${day}日 周${weekDay}`;
}
const getSX = (time) => {
  const str = time.substring(11, 16);
  const hour = parseInt(str.substring(0, 2));
  if (hour < 12) {
    return '上午'
  } else {
    return '下午'
  }
}
const getSx1 = (time) => {
  return time.substring(11, 16);
}
const getGsh = () => {
  const today = new Date();
  // 计算本周一的日期
  const monday = new Date(today);
  monday.setDate(today.getDate() - (today.getDay() || 7) + 1); // 处理周日的情况
  // 计算本周日的日期
  const sunday = new Date(today);
  sunday.setDate(today.getDate() + (7 - (today.getDay() || 7))); // 处理周日的情况
  // 格式化为 YYYY-MM-DD（可选）
  const formatDate = (date) => date.toISOString().split('T')[0];
  return `${formatDate(monday)}~${formatDate(sunday)}`.replaceAll('-', '.');
}
const perWeek = () => {
  curData.value = data.value.lastWeeks
}
const thisWeek = () => {
  curData.value = data.value.thisWeeks
}
const nextWeek = () => {
  curData.value = data.value.nextWeeks
}
const rili = () => {
  router.push({
    path: '/rcap',
    query: {
      userId: userId
    }
  })
}
const jumpDetail = (id) => {
  console.log(id)
  router.push({
    path: '/ckrc',
    query: {
      id: id,
      userId: userId
    }
  })
}
const jumpAddRc = () => {
  router.push({
    path: '/zjrc',
    query: {
      userId: userId.value
    }
  })
}
</script>

<template>
  <Header class="header" :isBack="true" name="日程安排" myTitle="日程安排" :isSearch="true" :isDelete="false" :isEdit="true"
    :isRili="false" :isComplete="false" :userId="userId" @addRc="jumpAddRc"></Header>
  <div class="option">
    <div class="perWeek" @click="perWeek"><img :src="PerWeek"><span>上一周</span></div>
    <div class="riqiDiv" @click="thisWeek">
      <!-- <div class="riqi1">{{ currentDate }}</div> -->
      <div class="riqi2">（{{ getGsh() }}）</div>
    </div>
    <div class="nextWeek" @click="nextWeek"><span>下一周</span><img :src="NextWeek"></div>
  </div>
  <div class="list">
    <div class="item" v-for="item in curData" :key="item.id" @click="jumpDetail(item.id)">
      <div class="itemFirst">
        <div class="itemFirstLeft">{{ gsh(item.year, item.month, item.day) }}</div>
        <!-- <div class="itemFirstRight">
          <img :src="Clock" />
          <span>10分钟前</span>
        </div> -->
      </div>

      <div class="itemSecond">
        <div class="itemSecond1" :class="item.is_complete == 1 ? '' : 'yellow'">{{ item.is_complete == 1 ? '已办' : '待办'
          }}
        </div>
        <div class="itemSecond2">上午</div>
        <div class="itemSecond2">{{ getSX(item.startTime) }}</div>
        <div class="itemSecond3">{{ getSx1(item.startTime) }}</div>
        <!-- <div class="itemSecond4"></div> -->
        <div class="itemSecond5"></div>
        <div class="itemSecond6"></div>
      </div>

      <div class="itemThree">事项：{{ item.remark }}</div>
    </div>

  </div>
</template>
<style scoped>
.lunar-content {
  text-align: center;
  font-size: 14px;
  color: #333;
}

.lunar {
  font-size: 12px;
  transform: scale(0.8);
  width: 10vw;
  text-align: center;
}

.header {
  height: 60px;
  flex-shrink: 0;
}

.option {
  flex-shrink: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: white;

  .perWeek,
  .nextWeek {
    width: 90px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #589FF6;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    gap: 8px;

    img {
      width: 10px;
      height: 15px;
    }
  }

  .riqiDiv {
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .riqi1 {
      font-size: 16px;
      color: #000000;
      font-weight: 500;
    }

    .riqi2 {
      font-size: 12px;
      color: #808080;
    }
  }
}

.list {
  margin-top: 10px;
  background: white;
  overflow: auto;
  flex-grow: 1;

  .item {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid #E3E3E3;

    .itemFirst {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .itemFirstLeft {
        color: #000000;
        font-size: 18px;
        font-weight: 500;
      }

      .itemFirstRight {
        height: 20px;
        background: #589FF6;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 10px;

        img {
          width: 12px;
          height: 12px;
        }

        span {
          color: #FFFFFF;
          font-size: 12px;
        }
      }
    }

    .itemSecond {
      display: flex;
      align-items: center;

      .itemSecond1 {
        background: #909DB6;
        border-radius: 10px;
        color: white;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        padding: 0 10px;
        margin-right: 6px;

        &.yellow {
          background: #FFB800;
        }
      }

      .itemSecond2,
      .itemSecond5 {
        color: #000000;
        font-size: 14px;
        font-weight: 500;
        margin-right: 10px;
      }

      .itemSecond3,
      .itemSecond6 {
        color: #589FF6;
        font-size: 14px;
        font-weight: 500;
        margin-right: 12px;
      }

      .itemSecond4 {
        width: 1.5px;
        height: 15.5px;
        background: #E3E3E3;
        margin-right: 16px;
      }
    }

    .itemThree {
      color: #909DB6;
      font-size: 14px;
    }
  }
}
</style>
